<script setup>
import {ref, onMounted} from 'vue'
import { useRouter } from 'vue-router'
import {Search, Tickets} from "@element-plus/icons-vue";
import {fetchBrandList, updateShowStatus, updateFactoryStatus, deleteBrand} from '@/api/brand'
import {ElMessage, ElMessageBox} from "element-plus";
import BrandDetail from "@/views/product/brand/components/brandDetail.vue";

// 是否编辑状态
// const isEdit = ref(false)
const router = useRouter()
onMounted(() => {
  getAllBrandList()
})
const listQuery = {
  keyword: null,
  pageNum: 1,
  pageSize: 10
}
const total = ref(0)
const brandAllList = ref([])
const getAllBrandList = async () => {
  const res = await fetchBrandList(listQuery)
  brandAllList.value = res.data.data.list
  total.value = res.data.data.total
}

const searchForm = ref()
const formData = ref({
  brandName: ''
})

// TODO: 搜索条件
const handleSearch = () => {
  listQuery.keyword = formData.value.brandName
  listQuery.pageNum = 1
  getAllBrandList()
}
// TODO: 重置搜索条件
const handleResetSearch = () => {
  searchForm.value.resetFields() // 清空搜索框
  formData.value = {
    brandName: ''
  }
  listQuery.keyword = null
  listQuery.pageNum = 1
  getAllBrandList()
}

// TODO: 添加品牌
const handleAdd = () => {
  router.push({path: '/product/brand/updateBrand'})
  console.log('添加品牌')
}
// TODO: 编辑品牌
const handleEdit = (row) => {
  console.log(row,'编辑品牌')
  router.push({path: '/product/brand/updateBrand', query: {id: row.id}})
}
// TODO: 删除品牌
const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该品牌吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteBrand(row.id).then((res) => {
      getAllBrandList()
      ElMessage.warning(res.data.message)
      ElMessage.success('删除成功')
    })
  }).catch(() => {
    console.log('取消删除')
  })
}

// 页码改变
const handleCurrentChange = (currentPage) => {
  listQuery.pageNum = currentPage
  getAllBrandList()
}
// 页码大小改变
const handleSizeChange = (pageSize) => {
  listQuery.pageSize = pageSize
  listQuery.pageNum = 1
  getAllBrandList()
}

</script>

<template>
  <div class="brand-container">

    <div class="brand-search">
      <div class="logo">
        <div class="logo-text">
          <el-icon>
            <Search/>
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="search-btn">
          <el-button type="primary" @click="handleSearch()">查询结果</el-button>
          <el-button @click="handleResetSearch()" icon="refresh">重置</el-button>
        </div>
      </div>
      <div class="search">
        <el-form :inline="true" ref="searchForm" v-model="formData" label-width="100px">
          <el-form-item label="品牌名称:">
            <el-input v-model="formData.brandName" placeholder="请输入品牌名称" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="brand-list">
      <div class="add-btn">
        <el-icon>
          <Tickets/>
        </el-icon>
        <span>数据列表</span>
      </div>
      <el-button type="primary" icon="plus" style="margin-left: 20px;" @click="handleAdd()">
        添加商品
      </el-button>
    </div>

    <div class="brand-table">
      <el-table :data="brandAllList" :border="true" style="width: 100%;">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column label="品牌编号" align="center">
          <template #default="{row}">{{ row.id }}</template>
        </el-table-column>
        <el-table-column label="品牌名称" align="center">
          <template #default="{row}">{{ row.name }}</template>
        </el-table-column>
        <el-table-column label="商品图片" width="350" align="center">
          <template #default="{row}">
            <img :src="row.logo" alt="" style="width: 200px;height: 80px;margin: 10px;">
          </template>
        </el-table-column>
        <el-table-column label="品牌首字母" align="center">
          <template #default="{row}">{{ row.firstLetter }}</template>
        </el-table-column>
        <el-table-column label="品牌排序" align="center">
          <template #default="{row}">{{ row.sort }}</template>
        </el-table-column>
        <el-table-column label="品牌制造商" align="center">
          <template #default="{row}">
            <el-switch
                @change="handleFactoryStatusChange(row)"
                :active-value="1"
                :inactive-value="0"
                v-model="row.factoryStatus">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="是否显示" align="center">
          <template #default="{row}">
            <el-switch
                @change="handleShowStatusChange(row)"
                :active-value="1"
                :inactive-value="0"
                v-model="row.showStatus">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="相关内容" align="center">
          <template #default="{row}">
            <span>商品：</span>
            <el-button
                size="small"
                type="text"
                @click="getProductList(row.$index, row)">100
            </el-button>
            <span>评价：</span>
            <el-button
                size="small"
                type="text"
                @click="getProductCommentList(row.$index, row)">1000
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template #default="{row}">
            <el-button icon="edit" type="primary" @click="handleEdit(row)">编辑</el-button>
              <el-button icon="delete" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
            background
            layout="total, sizes,prev, pager, next,jumper"
            :total="total"
            :page-sizes="[10,15,20,25]"
            v-model:page-size="listQuery.pageSize"
            v-model:current-page="listQuery.pageNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.brand-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;

  .brand-search {
    //height: 100px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;

    .logo {
      width: 100%;
      font-size: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        margin: 0 8px;
      }

      .search-btn {
        margin-left: 30px;
        padding: 0 10px;
      }
    }

    .search {
      width: 100%;

      .el-form {
        margin-top: 20px;

        .el-form-item {
          width: 280px;
        }
      }
    }
  }

  .brand-list {
    //height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;

    .add-btn {
      display: flex;
      align-items: center;

      span {
        margin-left: 8px;
        font-size: 18px;
      }
    }
  }

  .pagination {
    margin-top: 20px;
  }
}
</style>